import React from 'react';
import { useTodo } from '../context/TodoContext';
import TodoForm from '../components/TodoForm';
import TodoList from '../components/TodoList';

function ShoppingTodos({ navigationContext }) {
  const { getTodosByCategory } = useTodo();
  const shoppingTodos = getTodosByCategory('shopping');
  
  return (
    <div>
      <h2 className="demo3-page-title">购物待办事项</h2>
      <TodoForm category="shopping" />
      <TodoList todos={shoppingTodos} navigationContext={navigationContext} />
    </div>
  );
}

export default ShoppingTodos; 